<template>
    <div>
        <base-list ref="customer" :condition="condition" :isShowClose="true" :datas.sync="customers"
                   :pageSearch="pageSearch">
            <el-form :inline="true" :model="condition" class="search-form" slot="search" label-width="80px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="登录账户">
                            <el-input v-model="condition['search_LIKE_userName']" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="账号名称">
                            <el-input v-model="condition['search_LIKE_name']" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="手机号码">
                            <el-input v-model="condition['search_LIKE_telphone']" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-button type="primary" icon="el-icon-search" @click="loadData" class="ml-80">查 询</el-button>
                        <el-button formVisible="true" icon="el-icon-plus" @click="handleDialogFormOpen(1)"
                                   v-if="power('WBUSMGR_BUSMGR_CUSTOM:ADD')">
                            新增
                        </el-button>
                    </el-col>
                </el-row>
            </el-form>
            <el-row type="flex" justify="end" class="mt-10" slot="status">
                <el-col :span="12" style="display: flex;justify-content: space-between">
                    <title-point color="#449DFF">
                        <div slot="content" class="cir-sty">总数 : <span style="font-size: 16px">{{ total }}</span></div>
                    </title-point>
                    <title-point color="#50B155">
                        <div slot="content">
                            <div class="float-pub y-cir">启用 : <span style="font-size: 16px;padding-right: 20px;">{{ totalUse }} </span></div>
                            <div class="float-pub n-cir">禁用 : <span style="font-size: 16px">{{ totalUnuse }}</span></div>
                        </div>
                    </title-point>
                    <title-point color="#30C8CA">
                        <div slot="content">
                            <div class="float-pub y-cir">微信绑定 : <span style="font-size: 16px;padding-right: 20px;">{{ totalWX }}</span></div>
                            <div class="float-pub n-cir">未绑定 : <span style="font-size: 16px">{{ totalUNWX }}</span></div>
                        </div>
                    </title-point>
                </el-col>
            </el-row>
            <el-table slot="list" :data="customers" border stripe max-height="500">
                <el-table-column label="序号" type="index" width="55"></el-table-column>
                <el-table-column prop="userName" label="登录账号" min-width="80">
                    <template slot-scope="scope">
                        <a @click="goDea(scope.row)" style="color:blue;">{{scope.row.userName}}</a>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="账号名称" min-width="80" show-overflow-tooltip="">
                </el-table-column>
                <el-table-column prop="customerOrgName" label="所属单位"  min-width="120">
                </el-table-column>
                <el-table-column prop="telphone" label="手机号码"  min-width="120">
                </el-table-column>
                <el-table-column prop="expiredTime" label="有效期"  min-width="120">
                    <template slot-scope="scope">
                        {{scope.row.expiredTime?scope.row.expiredTime.substring(0,10):'无限期'}}
                    </template>
                </el-table-column>
                <el-table-column prop="customerWechat" label="微信绑定" min-width="80">
                    <template slot-scope="scope">
                        {{scope.row.customerWechat||'否'}}
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="是否启用" min-width="80">
                    <template slot-scope="scope">
                        {{ scope.row.status ?'是':'否' }}
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="账号描述" show-overflow-tooltip min-width="150">
                </el-table-column>
                <el-table-column prop="createBy" label="创建人" min-width="120">
                </el-table-column>
                <el-table-column prop="lastModifiedDateTime" label="最后修改时间"  min-width="160">
                </el-table-column>
                <el-table-column fixed="right" align="center" label="操作"  width="140">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" @click="handleDialogFormOpen(2,scope.row)"
                                   v-if="power('WBUSMGR_BUSMGR_CUSTOM:UPD')">
                            编辑
                        </el-button>
                        <el-dropdown style="margin-left:10px">
                            <span class="el-dropdown-link">
                                <el-button size="small" type="text">更多
                                    <i class="el-icon-arrow-down el-icon--right"></i>
                                </el-button>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>
                                    <el-button size="small" type="text" @click="resetPwd(scope.row)"
                                               v-if="power('WBUSMGR_BUSMGR_CUSTOM:UPD')">
                                        重置密码
                                    </el-button>
                                </el-dropdown-item>
                                <el-dropdown-item>
                                    <el-button type="text" class="danger" size="small"
                                               @click="handleRemove(scope.row.id)"
                                               v-if="power('WBUSMGR_BUSMGR_CUSTOM:DEL')">
                                        删除
                                    </el-button>
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
        </base-list>
        <el-dialog title="客户登录账户" :visible.sync="dialogForm" width="860px" :before-close="cancel">
            <el-form :inline="true" ref="form" :model="customerAdd" :rules="rules" class="add-form" label-width="140px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="登录账号：" prop="userName">
                            <el-input v-model="customerAdd.userName" placeholder="" :disabled="!isEditNmae"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="账号名称：" prop="name">
                            <el-input v-model="customerAdd.name" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="是否启用：">
                            <el-select v-model="customerAdd.status" placeholder="">
                                <el-option v-for="x in [{value:true,label:'是'},{value:false,label:'否'}]" :key="x.value"
                                           :label="x.label" :value="x.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="账户有效期：">
                            <el-date-picker v-model="customerAdd.expiredTime" placeholder=""
                                            :picker-options="pickerOptions0"
                                            value-format="yyyy-MM-dd"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="手机号码：">
                            <el-input v-model="customerAdd.telphone" placeholder="" :maxlength='11'></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="账号描述：" prop="remark">
                            <el-input v-model="customerAdd.remark" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="客户名称描述：" prop="customerOrgName">
                            <!-- {{$store.getters.currentUser&&$store.getters.currentUser.org.name}} -->
                            <el-input v-model="customerAdd.customerOrgName" placeholder=""></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="客户角色：">
                            <el-checkbox-group v-model="customerAdd.roles">
                                <el-checkbox v-for="item in role[0].dicArr" :key="item.dicCode" :label="item.dicCode">{{
                                    item.dicName }}
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-table :data="customerAdd.customer" border>
                <el-table-column label="序号" type="index" width="55"></el-table-column>
                <el-table-column label="客户代码" prop="customerAccount">
                    <template slot-scope="scope">
                        <search-custom v-model="scope.row.id" @matchRecord="v=>scope.row.name = v.name"
                                       :name="scope.row.customerCode"></search-custom>
                    </template>
                </el-table-column>
                <el-table-column label="客户名称" prop="name"></el-table-column>
                <el-table-column fixed="right" align="center" label="操作"  width="140">
                    <template slot-scope="scope">
                        <el-button size="small" type="text" @click="customerAdd.customer.push({})">
                            增加
                        </el-button>
                        <el-button type="text" class="danger" size="small"
                                   @click="customerAdd.customer.splice(scope.$index,1)"
                                   v-if="scope.$index === customerAdd.customer.length-1&&scope.$index!==0">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-form :inline="true" class="add-form" label-width="140px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="创建人：">
                            {{customerAdd.createBy}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="最后修改时间：">
                            {{customerAdd.lastModifiedDateTime}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="提示：">
                            <span style="color:green;">{{"登录账号建议使用“客户代码_账号名称首字母”或登录用户的手机号码；默认密码为6个8"}}</span>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="handleSubmit" :loading="$store.getters.loadingBtn">保 存</el-button>
            </div>
        </el-dialog>

        <el-dialog title="详情" :visible.sync="showDea" width="860px">
            <el-form :inline="true" class="add-form" label-width="140px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="登录账号：">
                            {{customerDea.userName}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="账号名称：">
                            {{customerDea.name}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="是否启用：">
                            {{customerDea.status?'是':'否'}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="账户有效期：">
                            {{customerDea.expiredTime||'无限期'}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="手机号码：">
                            {{customerDea.telphone}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="账号描述：">
                            {{customerDea.remark}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="所属单位：">
                            {{customerDea.customerOrgName}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="客户角色：">
                            {{customerDea.roles}}
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-table :data="customerDea.customer" border>
                <el-table-column label="序号" type="index" width="55"></el-table-column>
                <el-table-column label="客户代码" prop="customerCode">
                </el-table-column>
                <el-table-column label="客户名称" prop="name"></el-table-column>
            </el-table>

            <el-form :inline="true" class="add-form" label-width="140px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="创建人：">
                            {{customerDea.createBy}}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="最后修改时间：">
                            {{customerDea.lastModifiedDateTime}}
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="24">
                        <el-form-item label="提示：">
                            <span style="color:green;">{{"登录账号建议使用“客户代码_账号名称首字母”或登录用户的手机号码；默认密码为6个8"}}</span>
                        </el-form-item>
                    </el-col> -->
                </el-row>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import {
        delCustomAcc,
        getCustomAccs,
        getCustomAcc,
        addCustomAcc,
        aupdateCustomAcc,
        resetCusPassword
    } from "@/api/custom/customList"
    import {
        getSystemDictionaryList
    } from "@/api/system/systemDictionary";
    import titlePoint from '../common/title-point'
    import searchCustom from '@/components/autocomplete/autoSearchCustomLogin'
    import {
        getRoleList
    } from "@/api/system/role";
    import {
        shortLength,
        shortLLength,
        normalLength
    } from "@/utils/rules";
    import {
        PUBLIC_NUM_CODE,
        PUBLIC_PHONE_NEW
    } from "@/utils/Reg";
    import {
        getLocalTime
    } from "@/utils/dateFormat";


    export default {
        name: "客户登录账号",
        components: {
            searchCustom
        },
        data() {
            return {
                condition: {}, // 查询条件
                customers: [], // table数组
                pageSearch: getCustomAccs, // 分页查询api接口
                customerAdd: this.initCus(),
                customerDea: this.initCus(),
                total: 0,
                totalUse: 0,
                totalUnuse: 0,
                totalWX: 0,
                totalUNWX: 0,
                dialogForm: false,
                role: [{
                    dicArr: []
                }],
                allRoles: [],
                isEditNmae: false,
                rules: {
                    name: [{
                        required: true,
                        message: '请输入账户名称',
                        trigger: 'change'
                    }, shortLLength],
                    customerOrgName: [{
                        required: true,
                        message: '请输入所属单位',
                        trigger: 'change'
                    }],
                    userName: [{
                        required: true,
                        validator: PUBLIC_NUM_CODE,
                        trigger: 'change'
                    }, shortLength],
                    remark: [{
                        required: false,
                        message: '最多输入100个字符',
                        trigger: 'change'
                    }, normalLength]
                },
                pickerOptions0: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 8.64e7;
                    }
                },
                showDea: false
            }
        },
        mounted() {
            this.loadData()
        },
        methods: {
            loadData() {
                this.$refs.customer.loadData().then((dts) => {
                    this.total = dts.iTotalRecords
                    this.isEnable(this.total)
                })
            },
            // 是否启用
            isEnable(t) {
                let params = {
                    ...this.condition
                }
                for (let key in params) {
                    if(params[key] === '') {
                        delete params[key]
                    }
                }
                params.search_EQ_status = true
                getCustomAccs(params).then((res) => {
                    this.totalUse = res.data.iTotalRecords
                    this.totalUnuse = t - this.totalUse
                })
            },
            handleDialogFormOpen(x, row) {
                if (x === 1) {
                    this.isEditNmae = true
                    this.getRole()
                    this.dialogForm = true
                } else {
                    getCustomAcc(row.id).then(res => {
                        this.customerAdd = res.data
                        if (!this.customerAdd.customer) {
                            this.customerAdd.customer = []
                        }
                        let a = []
                        if (this.customerAdd.roles) {
                            this.customerAdd.roles.forEach(element => {
                                a.push(element.roleCode)
                            })
                        }
                        this.$set(this.customerAdd, 'roles', a)
                        this.isEditNmae = false
                        this.getRole()
                        this.dialogForm = true
                    })
                }
            },
            goDea(row) {
                getCustomAcc(row.id).then(res => {
                    this.customerDea = res.data
                    if (!this.customerDea.customer) {
                        this.customerDea.customer = []
                    }
                    let a = []
                    if (this.customerDea.roles) {
                        this.customerDea.roles.forEach(element => {
                            a.push(element.roleName)
                        })
                    }
                    this.$set(this.customerDea, 'roles', a)
                    this.customerDea.roles = this.customerDea.roles.join(',')
                    this.showDea = true
                })

            },
            handleRemove(id) {
                this.$confirm('是否确认删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delCustomAcc(id).then(res => {
                        this.$message({
                            message: '删除成功!',
                            type: 'success'
                        })
                        this.loadData()
                    })
                })
            },
            resetPwd(row) {
                this.$confirm('是否确认将密码重置为6个8?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    resetCusPassword(row.id, {
                        newPwd: 888888,
                        confirmNewPwd: 888888
                    }).then(res => {
                        this.$message({
                            message: '重置密码成功!',
                            type: 'success'
                        })
                        this.loadData()
                    })
                })
            },
            handleSubmit() {
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        for (let index = this.customerAdd.customer.length - 1; index >= 0; index--) {
                            if (JSON.stringify(this.customerAdd.customer[index]) === '{}') {
                                this.customerAdd.customer.splice(index, 1)
                            }
                        }
                        let a = []
                        this.customerAdd.customer.forEach(element => {
                            a.push({
                                id: element.id
                            })
                        });
                        this.customerAdd.customer = a
                        this.customerAdd.orgId = this.$store.getters.currentUser.org.id
                        this.customerAdd.password = 888888
                        if (this.customerAdd.expiredTime) {
                            this.customerAdd.expiredTime = this.customerAdd.expiredTime.substring(0, 10) + ' 23:59:59'
                        }
                        this.allRoles.forEach(f => {
                            this.customerAdd.roles.map((m, i) => {
                                if (f.roleCode == m) {
                                    this.customerAdd.roles[i] = {
                                        id: f.id,
                                        roleName: f.roleName
                                    }
                                }
                            })
                        })
                        if (this.customerAdd.id) {
                            aupdateCustomAcc(this.customerAdd.id, this.customerAdd).then(res => {
                                this.$message({
                                    message: '编辑成功!',
                                    type: 'success'
                                })
                                this.cancel()
                            })
                        } else {
                            addCustomAcc(this.customerAdd).then(res => {
                                this.$message({
                                    message: '新增成功!',
                                    type: 'success'
                                })
                                this.cancel()
                            })
                        }
                    }
                })
            },
            initCus() {
                return {
                    roles: [],
                    customer: [{}],
                    status: true,
                    createBy: this.$store.getters.currentUser.name,
                    lastModifiedDateTime: getLocalTime(new Date().getTime(), 'YYYY-MM-DD')
                }
            },
            cancel() {
                this.role = [{
                    dicArr: []
                }]
                this.customerAdd = this.initCus()
                this.$refs.form.resetFields()
                this.dialogForm = false
                this.loadData()
            },
            // 获取角色列表
            getRole() {
                const params = {
                    search_EQ_firstRoot: 1,
                    search_LIKE_dicCode: 'CUSTOMER_ROLE',
                    iDisplayStart: 0,
                    iDisplayLength: 10
                }
                getSystemDictionaryList(params).then(res => {
                    if (res.data.aaData.length > 0 && res.data.aaData[0].dicArr) {
                        this.role = res.data.aaData
                    } else {
                        this.role = [{
                            dicArr: []
                        }]
                    }
                })
                const params2 = {
                    iDisplayStart: 0,
                    iDisplayLength: 1000,
                    'search_LIKE_org.id': this.$store.state.user.currentUser.org.id,
                    sortType: '-createDateTime'
                }
                getRoleList(params2).then(res => {
                    this.allRoles = res.data.aaData
                })
            }
        }

    }

</script>
<style lang="scss" scoped>
    .cir-sty{
        text-indent: 15px;
        position: relative;
    }
    .cir-sty:after,.y-cir:after,.n-cir:after{
        content: " ";
        height: 10px;
        width: 10px;
        border-radius: 100%;
        position: absolute;
        left: 0;
        top: 52%;
        transform: translate(0,-52%);
    }
    .cir-sty:after{
        background: #9677cd;
    }
    .float-pub{
        float: left;
        text-indent: 15px;
        position: relative;
    }
    .y-cir:after{
        background: #66bb6a;
    }
    .n-cir:after{
        background: #777;
    }
</style>
